<template>
	<view id = "login-content">
		<view class="login-backg">
			<view class="login-text">登录</view>
			<view class="login-text login-text-mini">欢迎登录趣校园~</view>
		</view>
		<view class="login-form-block">
			<view class="login-form">
				<view class="login-form-item">
					<view class="login-form-labe iconfont icon-youjian"></view>
					<input class="login-form-input" v-model="user.account" type="text" placeholder="账号/邮箱/电话" />
				</view>
				<view class="login-form-item">
					<view class="login-form-labe iconfont icon-mima"></view>
					<input class="login-form-input" v-model="user.password" type="password" placeholder="请输入账号密码" />
					<view class="password-show iconfont icon-yincangbukejian"></view>
				</view>
				<view class="login-form-item">
					<view class="login-form-labe iconfont icon-yanzhengma"></view>
					<input class="login-form-input" v-model="user.captchaCode" type="text" placeholder="请输入验证码" />
					<view class="image-wrap">
						<image @click="refreshCaptcha" class="verif-code" :src="captchaBase64" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="flex-ali-center flex-juscon-bet register-forget">
				<view @click="register">注册</view>
				<view @click="forgetPassword">忘记密码？</view>
			</view>
			<view class="login-btn" @click="login">登录</view>
		</view>
		<view class="third-party-login">
			<view class="hint-text">第三方登录</view>
			<view class="third-party-btns flex-juscon-center">
				<view @click="loginForOther" data-loginType="qq" class="qq-login iconfont icon-QQ"></view>
				<view @click="loginForOther" data-loginType="weixin" class="wx-login iconfont icon-logo-wechat"></view>
			</view>
		</view>
		<view class="agreement flex-ali-baseline">
			<checkbox-group @change="changeAgreement">
				<checkbox value="1" class="agreement-checkbox" />
			</checkbox-group>
			<view>
				我已阅读并同意<text @click="useAgreement" class="link-text-color">《趣校园用户使用协议》</text>及<text @click="serviceAgreement" class="link-text-color">《趣校园用户服务协议》</text>
			</view>
		</view>
		<mpopup ref="mpopup" :isdistance="true"></mpopup>  
	</view>
</template>

<script>
	import {Captcha} from '@/model/captcha.js';
	import {User} from '@/model/user.js';
	import {utils} from '@/utils/utils.js';
	import mpopup from '@/components/xuan-popup/xuan-popup.vue'
	export default {
		data() {
			return {
				user:{
					account:'',
					password:'',
					captchaCode:'',
					captchaKey:''
				},
				isRead:false,
				captchaBase64:'',
			};
		},
		async onLoad() {
			let token = utils.getStorage("token")
			this.$store.token = token;
			// let res = await
			if(token){
				let tokenRes = await User.authToken()
				if(tokenRes.code == 200){
					this.$store.loginStatus = true
					uni.switchTab({
						url:"../index/index"
					})
					return
				}
			}
			let res = await Captcha.getCaptcha()
			this.captchaBase64 = res.data.imgBase64
			this.user.captchaKey = res.data.captchaKey
		},
		components:{
			mpopup
		},
		methods:{
			changeAgreement(e){
				// TODO 监听复选框发生改变
				if(e.detail.value.length > 0){
					this.isRead = true;
					return
				}
				this.isRead = false
			},
			async refreshCaptcha(){
				let res = await Captcha.refreshCaptcha(this.user.captchaKey)
				this.captchaBase64 = res.data.imgBase64
				this.user.captchaKey = res.data.captchaKey
			},
			async login(){
				let _this = this
				// TODO 登录请求
				if(this.isRead){
					if(!this.loginParameterValidation()){
						uni.showToast({
							icon:'none',
						    title: '请请填写账户信息',
						    duration: 2000
						});
						return
					}
					
					// TODO 发送登录请求
					uni.showLoading({
						title:"登录中！"
					})
					let res = await User.login({
						account:this.user.account,
						password:this.$sha1(this.user.password),
						captchaCode:this.user.captchaCode,
						captchaKey:this.user.captchaKey
					})
					// if()
					if(res.code != 200){
						uni.showToast({
							icon:'none',
						    title: res.message,
						    duration: 2000
						});
						this.refreshCaptcha()
					}
					uni.hideLoading()
					if(res.code == 200){
						utils.setStorage("token",res.data.token)
						utils.setStorage("user",res.data.user)
						_this.$store.token = res.data.token
						_this.$store.user = res.data.user
						uni.reLaunch({
							url:"../index/index",
						})
					}
					return;
				}
				uni.showToast({
					icon:'none',
				    title: '请详细阅读并勾选服务及使用协议',
				    duration: 2000
				});
			},
			loginParameterValidation(){
				if(this.user.account && this.user.password && this.user.captchaCode && this.user.captchaKey){
					return true
				}
				return false
			},
			loginForOther(e){
				// TODO 第三方登录
				this.$refs.mpopup.open({
					type:'err',
					content:'通道暂时关闭，请账号登录！',
					timeout:1000,
					isClick:false
				});
				return
				let _this = this
				if(this.isRead){
					// TODO 第三方登录请求
					// #ifdef APP-PLUS || APP-VUE
					let loginType = e.target.dataset.loginType
					// #endif
					// #ifdef MP-QQ || MP-WEIXIN
					let loginType = e.currentTarget.dataset.logintype
					// #endif
					// #ifdef APP-PLUS || APP-VUE || MP-WEIXIN || MP-QQ 
					uni.login({
						provider: loginType,
						success: res => {
							uni.getUserInfo({
								provider: loginType,
								async success(resp) {
									uni.showLoading({
										title:"登录中！"
									})
									if(loginType == 'qq'){
										let params = resp.userInfo;
										params.loginType = loginType
										let r = await User.loginForOther(params)
										uni.hideLoading()
										if(r.code != 200){
											uni.showToast({
												icon:'none',
											    title: res.message,
											    duration: 2000
											});
											return
										}
										utils.setStorage("token",r.data.token)
										utils.setStorage("user",JSON.stringify(r.data.user))
										_this.$store.token = r.data.token
										_this.$store.user = r.data.user
										uni.reLaunch({
											url:"../index/index",
										})
									}
									if(loginType == 'weixin'){
										console.log(resp)
										let params = resp.userInfo;
										params.loginType = loginType;
										params.nickname = resp.userInfo.nickName
										let r = await User.loginForOther(params)
										uni.hideLoading()
										if(r.code != 200){
											uni.showToast({
												icon:'none',
											    title: res.message,
											    duration: 2000
											});
											return
										}
										utils.setStorage("token",r.data.token)
										utils.setStorage("user",r.data.user)
										_this.$store.token = r.data.token
										_this.$store.user = r.data.user
										uni.reLaunch({
											url:"../index/index",
										})
									}
								}
							})
						}
					})
					// #endif
					return;
				}
				uni.showToast({
					icon:'none',
				    title: '请详细阅读并勾选服务及使用协议',
				    duration: 2000
				});
				
			},
			register(){
				// TODO 注册
				uni.navigateTo({
					url:"../register/register"
				})
			},
			forgetPassword(){
				// TODO 忘记密码
			},
			serviceAgreement(){
				
			},
			useAgreement(){
				
			}	
		}
	}
</script>

<style lang="scss" scoped>
	#login-content{
		.login-backg{
			width: 100vw;
			height: 300rpx;
			background: url('../../static/imgs/login/loginBackg.png');
			background-size: cover;
			background-position: 0 -100rpx;
			background-repeat: no-repeat;
			overflow: hidden;
			.login-text{
				margin-top: 40rpx;
				font-size: 60rpx;
				color: #FFF;
				text-align: center;
			}
			.login-text.login-text-mini{
				margin-top: 40rpx;
				font-size: 40rpx;
				letter-spacing: 20rpx;
			}
		}
		.login-form-block{
			width: 600rpx;
			margin: 40rpx auto 0rpx auto;
			border: 1px #fff solid;
			.login-form{
				.login-form-item{
					display: flex;
					margin-bottom: 50rpx;
					align-items: center;
					.image-wrap{
						width: 160rpx;
						height: 70rpx;
					}
					.login-form-labe{
						margin-right: 20rpx;
						font-size: 50rpx;
						color: $fun-icon-b-color;
						margin-top: auto;
					}
					.login-form-input{
						padding: 6rpx;
						border-bottom: 1px $fun-input-bootom-color solid;
						flex: 1;
						margin-right: 20rpx;
					}
					.password-show{
						font-size: 50rpx;
						color: $fun-icon-b-color;
					}
					.verif-code{
						width: 160rpx;
					}
				}
			}
			.register-forget{
				margin-top: 30rpx;
				font-size: 24rpx;
				color: $fun-link-text-color;
			}
			.login-btn{
				height: 80rpx;
				margin-top: 40rpx;
				background-color: $fun-theme-color;
				border-radius: 20rpx;
				text-align: center;
				line-height: 80rpx;
				color: #FFF;
			}
			
		}
		.third-party-login{
			.third-party-btns{
				margin-top: 20rpx;
			}
			.third-party-btns>view{
				font-size: 80rpx;
				margin: 0 50rpx;
				
			}
			.qq-login{
				color: #30A5DD;
			}
			.wx-login{
				color: #30D101;
			}
			.hint-text{
				margin-top: 40rpx;
				font-size: 20rpx;
				color: $fun-text-6-color;
				text-align: center;
				letter-spacing: 8rpx;
			}
		}
		.agreement{
			checkbox-group{
				display: inline-block;
				width: 50rpx;
			}
			font-size: 20rpx;
			position: fixed;
			bottom: 10rpx;
			left: 10rpx;
			.agreement-checkbox{
				transform:scale(0.5);
			}
		}
		
	}

</style>
